<template>
	<div class>
		<div class="scanner-box" v-show="showScanCodeView">
			<div class="box">
				<div class="line"></div>
				<div class="angle"></div>
			</div>
			<div id="reader" width="600px" height="600px" v-show="false"></div>
			<canvas id="scanner-canvas" style="width:300px; height:300px;" class="canvas" v-show="false"></canvas>
			<div class="scanner-video-box">
				<video class="scanner-customer-video" id="scanner" ref="scanner" muted autoplay webkit-playsinline playsinline x5-playsinline></video>
			</div>
			<!-- 扫码遮罩 -->

			<!-- 结束扫码-->
			<div class="scanner-mask">
				<img src="../../static/image/closeScanner.png" class="stop-scanner" @click="stopScanCode()" v-show="showScanCodeView" />
			</div>
		</div>
	</div>
</template>
<script>
import ivcs from '../ivcs-sdk';
import Scanner from '../modules/scanner/scanner';
export default {
	props: {
		showScanCodeView: {
			type: Boolean,
			required: true,
			default: () => false
		},
		camera: {
			type: String,
			default: () => ''
		},
		responseScanCode: {
			type: Function,
			default: null
		},
		isRobot: {
			type: Boolean,
			default: () => false
		},
		responseReadWatingData: {
			type: Object,
			default: () => {}
		},
		responseViewResource: {
			type: Function,
			default: null
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			myVideo: document.getElementById('customer')
		};
	},
	watch: {},
	created() {},
	mounted() {
		if (this.showScanCodeView) {
			this.scannerCode();
		}
	},
	methods: {
		/************************** 扫码 *************************/
		scannerCode() {
			if (this.showScanCodeView) {
				let devicePixelRatio = window.devicePixelRatio;
				const video = document.getElementById('scanner');
				const canvas = document.getElementById('scanner-canvas');
				canvas.width = parseInt(window.getComputedStyle(canvas, null)['width']) * devicePixelRatio;
				canvas.height = parseInt(window.getComputedStyle(canvas, null)['height']) * devicePixelRatio;
				if (this.camera === 'front') {
					this.switchCamera()
						.then(stream => {
							this.$store.commit('setCamera', 'back');
							this.$refs.scanner.srcObject = stream;
							this.$refs.scanner.load();
							this.$refs.scanner.play();
						})
						.catch(err => {
							console.log(err);
						});
				} else {
					this.$store.commit('setCamera', 'back');
					this.$refs.scanner.srcObject = this.myVideo.srcObject;
				}
				this.getScannerQuCode(canvas, video);
			} else {
				this.switchCamera()
					.then(stream => {
						this.myVideo.srcObject = stream;
						this.myVideo.load();
						this.myVideo.play();
					})
					.catch(err => {
						console.log(err);
					});
			}
		},

		getScannerQuCode(canvas, video) {
			let result = {};
			try {
				const context = canvas.getContext('2d');
				this.scannerTimer = setInterval(() => {
					context.drawImage(video, 0, 0, 600, 600);
					const imageBase64 = canvas.toDataURL('image/png', 1);
					const scanner = new Scanner('reader', imageBase64);
					scanner.decodeScaneer(
						res => {
							result.message = res;
							result.code = 200;
							if (res) {
								if (this.scannerTimer) {
									clearInterval(this.scannerTimer);
								}
								this.$Notice.success({
									title: this.$t('ivcs.confirm'),
									desc: this.$t('scanner.scanner_qu_success'),
									duration: 2,
									top: 0
								});
								let code = res;
								let data = { code: res, type: 'bar-code' };
								this.responseScanCode(
									this.cmdId,
									'done',
									data,
									this.clientId,
									res => {
										this.$emit('closeScanCodeView', '', 'bar-code', code);
										console.log(res, 'response scan code bar-code done success');
									},
									err => {
										console.log(err, 'response scan code bar-code done success');
									}
								);
							}
							if (this.camera === 'back') {
								this.switchCamera()
									.then(stream => {
										this.$store.commit('setCamera', 'front');
										this.myVideo.srcObject = stream;
										this.myVideo.load();
										this.myVideo.play();
										this.$emit('closeScanCodeView');
									})
									.catch(err => {
										console.log(err);
										let data = { reason: '扫码切换摄像头失败', type: 'bar-code', code: '' };
										this.responseScanCode(
											this.cmdId,
											'failed',
											data,
											this.clientId,
											res => {
												console.log(res, 'response scan code switch camera failed success');
											},
											err => {
												console.log(err, 'response scan code switch camera failed success');
											}
										);
									});
							} else {
								this.$emit('closeScanCodeView');
							}
						},
						err => {
							console.log(err);
						}
					);
					scanner.scannerParseImg(
						res => {
							result.message = res;
							result.code = 200;
							if (res) {
								clearInterval(this.scannerTimer);
								this.$Notice.success({
									title: this.$t('ivcs.confirm'),
									desc: this.$t('scanner.scanner_qu_success'),
									duration: 2,
									top: 0
								});
								// this.scanCodeResult = res;
								if (!this.isRobot) {
									console.log(res);
									if (res.indexOf('http') != -1 || res.indexOf('https') != -1) {
										this.$emit('scanCodeSuccessOpenLink', res);
									}
								}
								let data = { code: res, type: 'qr-code' };
								this.responseScanCode(
									this.cmdId,
									'done',
									data,
									this.clientId,
									res => {
										this.$emit('closeScanCodeView');
										console.log(res, 'response scan code qr-code success');
									},
									err => {
										console.log(err, 'response scan code qr-code error');
									}
								);
								// eslint-disable-next-line no-undef
								if (this.camera === 'back') {
									this.switchCamera()
										.then(stream => {
											this.$store.commit('setCamera', 'front');
											this.myVideo.srcObject = stream;
											this.myVideo.load();
											this.myVideo.play();
											this.$emit('closeScanCodeView');
										})
										.catch(err => {
											console.log(err);
											let data = { reason: '扫码切换摄像头失败', type: 'qr-code', code: '' };
											this.responseScanCode(
												this.cmdId,
												'failed',
												data,
												this.clientId,
												res => {
													console.log(res, 'response scan code switch camera failed success');
												},
												err => {
													console.log(err, 'response scan code switch camera failed error');
												}
											);
										});
								} else {
									// this.isScaning = false;
									this.$emit('closeScanCodeView');
								}
							}
						},
						err => {
							console.log(err);
						}
					);
				}, 1500);
			} catch (e) {
				console.log(e);
				this.sendMessageRecord('system_msg', 'scanner err', e);
				clearInterval(this.scannerTimer);
			}
		},
		/**
		 * 访客停止扫码切换摄像头
		 */
		stopScanCode() {
			//清除截图定时器
			clearInterval(this.scannerTimer);
			this.responseScanCode(
				this.cmdId,
				'rejected',
				undefined,
				this.clientId,
				res => {
					console.log(res, 'response scan-code rejected success');
				},
				err => {
					console.log(err, 'response scan-code rejected error');
				}
			);
			//取消扫码切换摄像头
			if (this.camera === 'back') {
				this.switchCamera()
					.then(stream => {
						// this.camera = 'front';
						this.$store.commit('setCamera', 'front');
						this.myVideo.srcObject = stream;
						this.myVideo.load();
						this.myVideo.play();
						this.$emit('closeScanCodeView', 'customer');
					})
					.catch(err => {
						console.log(err);
					});
			} else {
				// this.camera = 'back';
				this.$store.commit('setCamera', 'back');
				this.$emit('closeScanCodeView', 'customer');
			}
			this.$Notice.error({
				title: this.$t('ivcs.confirm'),
				desc: this.$t('scanner.you_code_scanning'),
				duration: 2,
				top: 0
			});
		},
		/**
		 * 选择摄像头
		 */
		switchCamera() {
			return new Promise((resolve, reject) => {
				ivcs.client.switchCamera(
					stream => {
						resolve(stream);
					},
					err => {
						console.log(err);
						this.sendMessageRecord('system_msg', 'client switch camera err', err);
						reject(err);
						this.$Message.error(this.$t('camera.switchError'));
					}
				);
			});
		}
	},

	beforeDestroy() {
		if (this.scannerTimer) {
			clearInterval(this.scannerTimer);
		}
	}
};
</script>
<style scoped>
.scanner-agent-video {
	width: 160px !important;
	position: absolute;
	height: 120px;
	z-index: 10;
	top: 20px;
	object-fit: cover;
}
.scanner-customer-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #000;
}
.scanner-canvas {
	position: absolute;
	width: 400px;
	height: 100px;
	top: 50%;
	left: 0;
	z-index: 10;
	margin-top: -150px;
}
.scanner-mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 102;
}
.scanner-video-box {
	width: 75vw;
	height: 75vw;
	max-height: 75vh;
	max-width: 75vh;
	position: absolute;
	z-index: 20;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}
.stop-scanner {
	position: absolute;
	right: 6%;
	top: 4%;
	bottom: 50px;
	width: 12%;
	margin-left: -10%;
}
.scanner-box {
	background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent),
		linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent);
	background-size: 3rem 3rem;
	background-position: -1rem -1rem;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 101;
	background-color: #111;
}

.scanner-box .box {
	width: 78vw;
	height: 75vw;
	max-height: 75vh;
	max-width: 75vh;
	position: relative;
	left: 50%;
	top: 50%;
	z-index: 33;
	transform: translate(-50%, -50%);
	overflow: hidden;
	border: 0.1rem solid rgba(0, 255, 51, 0.2);
}

.scanner-box .line {
	height: calc(100% - 2px);
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
	border-bottom: 3px solid #00ff33;
	transform: translateY(-100%);
	animation: radar-beam 2s infinite;
	animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
	animation-delay: 1.4s;
}

.scanner-box .box:after,
.scanner-box .box:before,
.scanner-box .angle:after,
.scanner-box .angle:before {
	content: '';
	display: block;
	position: absolute;
	width: 3vw;
	height: 3vw;

	border: 0.2rem solid transparent;
}

.scanner-box .box:after,
.scanner-box .box:before {
	top: 0;
	border-top-color: #00ff33;
}

.scanner-box .angle:after,
.scanner-box .angle:before {
	bottom: 0;
	border-bottom-color: #00ff33;
}

.scanner-box .box:before,
.scanner-box .angle:before {
	left: 0;
	border-left-color: #00ff33;
}

.scanner-box .box:after,
.scanner-box .angle:after {
	right: 0;
	border-right-color: #00ff33;
}

@keyframes radar-beam {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}
</style>
